<template>
  <view class="card-container" @click="onCardClick">
    <!-- 左侧视频封面 -->
    <image class="card-image" src="@/static/video_preview/专业团队.png" />

    <!-- 右侧信息区域 -->
    <view class="card-content">
      <!-- 视频名称，限制长度并添加省略号 -->
      <text class="card-title">{{ truncate(video.videoName, 10) }}</text>

      <!-- 教师名称和简介信息 -->
      <view class="teacher-info">
        <text class="teacher-name">{{ video.teacher.teacherName }}</text>
        <text class="video-remake">{{ truncate(video.videoRemake, 6) }}</text>
      </view>

      <!-- 右下角操作按钮 -->
      <view class="more-button">
        <text>...</text>
      </view>
    </view>
  </view>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  props: {
    video: {
      type: Object,
      required: true
    }
  },
  methods: {
    ...mapMutations(['setVideoAbout']),
    
    // 点击卡片时触发
    onCardClick() {
      // 将当前视频设置为 videoAbout
      this.setVideoAbout(this.video);

      // 跳转到视频展示页面
      uni.navigateTo({
        url: '/pages/video_display/index'
      });
    },

    // 截断文本方法
    truncate(text, length) {
      return text.length > length ? text.slice(0, length) + "..." : text;
    }
  }
};
</script>

<style scoped>
.card-container {
  display: flex;
  width: 100%;
  padding:  10px 0 10px 0;
  margin: 2px 0 2px 0 ;
  background-color: #ffffff;
  box-shadow:  0 2px 0 0  rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.card-image {
  width: 120px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  margin-right: 10px;
}

.card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}

.teacher-info {
  display: flex;
  flex-direction: column;
  color: #666666;
  font-size: 12px;
}

.teacher-name {
  margin-bottom: 4px;
}

.video-remake {
  color: #999999;
}

.more-button {
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: #666666;
  font-size: 18px;
}
</style>
